@import url('../common/common.less');

.teachdetail {
    width: @boxwidth;
    margin: 40px auto 0;
   .main {
       width: 704px;
       background: url(resource/avatar_bg.jpg) no-repeat;
       float: left;
       padding-top: 172px;
       text-align: center;
       .head {
            margin-bottom: 43px;
            .avatar {
                 width: 136px;
                 height: 136px;
                 border-radius: 50%;
                 border: 10px solid #f5f5f5;
                 margin-top: -120px;
                 z-index: 10;
            }
            .name {
                 font-size: 26px;
                 height: 42px;
                 line-height: 42px;
            }
            p {
                 color: #727272;
            }
       }
       .box {
            padding: 0 44px;
            margin-bottom: 60px;
            .til {
                height: 32px;
                line-height: 32px;
                margin-bottom: 20px;
                padding: 0 28px;
                .line {
                    height: 1px;
                    width: 200px;
                    background-color: #e5e5e5;
                    line-height: 32px;
                    position: relative;
                    top: -2px;
                    display: inline-block;
                }
                p {
                    width: 118px;
                    height: 32px;
                    display: inline-block;
                    padding: 0 28px;
                    border-radius: 28px;
                    background-color: #e5e5e5;
                }
            }
            &>p {
                text-indent: 2em;
                text-align: left;
                line-height: 22px;
            }
       }
       #time {
            p {
                padding-top: 10px;
            }
       }

   }

   .aside {
        width: 414px;
        float: right;
        .head {
            height: 68px;
            border: 1px solid #e7e7e7;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 10px 30px;
            &>div {
                width: 60px;
                text-align: center;
            }
        }
        .wrap {
            div {
                height: 58px;
                line-height: 58px;
                padding-left: 26px;
                position: relative;
                .iconfont {
                    font-size: 26px;
                    vertical-align: top;
                    color: #303030;
                }
                span {
                    line-height: 58px;
                    vertical-align: top;
                    padding-left: 33px;
                    color: #303030;
                }
                &.active:before {
                    display: block;
                    content: '';
                    width: 1px;
                    height: 58px;
                    background: @orange;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                &.active {
                    span,
                    .iconfont {
                        color: @orange!important;
                    }
                }
            }
        }

        &>a {
            margin-top: 20px;
            height: 66px;
            border: 1px solid @orange;
            display: block;
            font-size: 20px;
            line-height: 66px;
            text-align: center;
            vertical-align: top;
            color: @orange;
            .iconfont {
                font-size: 36px;
                vertical-align: top;
                margin-right: 20px;
            }
        }


   }
}

